<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">天启探知进件</h3>
      <el-form-item prop="name">
        <el-input v-model.trim="registerForm.name" type="text" placeholder="姓名">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="cardNo">
        <el-input
          v-model.trim="registerForm.cardNo"
          type="text"
          placeholder="身份证号"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="tel">
        <el-input
          v-model.trim="registerForm.tel"
          type="tel"
          placeholder="电话"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          :disabled="!isEdit"
          v-model.trim="registerForm.moreInfo"
          type="text"
          placeholder="备注"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="job" class="fa fa-address-book"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model.trim="registerForm.code"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
        </div>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleRegister">
          <span v-if="!loading">提交</span>
          <span v-else>提交...</span>
        </el-button>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-checkbox v-model="checked">
          同意
        </el-checkbox>
        <a @click="dialogVisible = true" style="color: #0d99fd ">《服务与隐私协议》</a>
        <a :href="squrl" style="color: #0d99fd ">《授权书》</a>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible" width="90%">
      <protocol></protocol>
      <span slot="footer">
        <el-button @click="checked = false;dialogVisible = false">不同意</el-button>
        <el-button type="primary" @click="checked = true;dialogVisible = false">同意</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" width="90%">
      <pdf
        :src="squrl">
      </pdf>
      <span slot="footer">
        <el-button @click="checked = false;dialogVisible = false">不同意</el-button>
        <el-button type="primary" @click="checked = true;dialogVisible = false">同意</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getUserId} from "@/api/system/user"
  import {getCodeImg} from "@/api/login";
  import {addQuery} from "@/api/system/query"
  import {validateContacts, validateIdNo, validatePhone} from "@/utils/validate"
  import protocol from "@/views/components/protocol.vue"
  import { pdf } from 'vue-pdf'
  import {Loading} from "element-ui";

  export default {
    name: "invite",
    components: {protocol, pdf},
    data() {
      return {
        dialogVisible: false,
        checked: true,
        codeUrl: '',
        registerForm: {
          userId: undefined,
          name: '',
          cardNo: '',
          tel: '',
          moreInfo: undefined,
          code: undefined,
          uuid: undefined
        },
        routerUrl: undefined,
        isEdit: true,
        registerRules: {
          name: [
            {min: 2, max: 20, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur'},
            {validator: validateContacts, trigger: 'blur'}
          ],
          cardNo: [
            {validator: validateIdNo, trigger: 'blur'}
          ],
          tel: [
            {validator: validatePhone, trigger: 'blur'}
          ],
          code: [{required: true, trigger: "blur", message: "请输入验证码"}]
        },
        loading: false,
        captchaEnabled: true,

        squrl: window.location.origin + '/dev-api/authBook'
      };
    },
    created() {
      if (!this.$route.query.code) {
        Loading.service({
          text: "链接不可用",
          spinner: "el-icon-error",
          background: "rgba(0, 0, 0, 0.7)",
        })
        return
      }
      // 拉取用户id
      getUserId(this.$route.query.code).then(res => {
        if (res.data) {
          this.registerForm.userId = res.data
          this.registerForm.moreInfo = this.$route.query.remark
          this.isEdit = this.$route.query.edit == '1' ? true : false
          let to = this.$route.query.to
          if (to) {
            this.routerUrl = to
          }
          this.getCode()
        } else {
          Loading.service({
            text: "链接已失效",
            spinner: "el-icon-error",
            background: "rgba(0, 0, 0, 0.7)",
          })
        }
      })
    },
    methods: {
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
          if (this.captchaEnabled) {
            this.codeUrl = "data:image/gif;base64," + res.img;
            this.registerForm.uuid = res.uuid;
          }
        })
      },
      handleRegister() {
        if (!this.checked) {
          this.$modal.msg('请勾选《服务与隐私协议》！')
          return
        }
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            this.loading = true
            addQuery(this.registerForm).then(res => {
              if (res.code == 200) {
                this.$modal.msgSuccess('提交成功！')
                if (this.routerUrl) {
                  this.$router.push(this.routerUrl + "?ID=" + res.ID)
                }
              } else {
                this.$modal.msgWarning('提交异常！')
              }
            }).finally(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            })
          }
        });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">

  .register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/images/login-background.jpg");
    background-size: cover;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .register-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .register-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .register-code-img {
    height: 38px;
  }
</style>
